import "./index.scss";
// import Vc from "@/components/video";
import VideoComponent from "@/components/videoComponent";
import FuncSide from "./funcSide";
import { videos } from "@/utils/videoList";
import { Content } from "antd/es/layout/layout";
import { Layout, Carousel } from "antd";
import { useEffect, useRef, useState } from "react";
const VideoData = () => {
  const [videoIndex, setVideoIndex] = useState(0);
  const carouselRef = useRef<any>(null);
  const changeCallBack = (current: number) => {
    const ref = carouselRef.current;
    if (current !== 1) ref.goTo(1, true); //不加判断会无限死循环
  };
  const changeItem = (e: any) => {
    const { keyCode } = e;
    const ref = carouselRef.current;
    if (keyCode === 38) {
      //上键
      setVideoIndex(videoIndex - 1);
      ref.prev();
    } else if (keyCode === 40) {
      //下键
      setVideoIndex(videoIndex + 1);
      ref.next();
    }
  };
  const createVideo = (videoSrc: string) => {
    return <VideoComponent videoSrc={videoSrc} />;
    // return <Vc sources={[videoSrc]} />;
  };
  useEffect(() => {
    changeCallBack(0);
  }, []);
  return (
    <div className="VDPage">
      {/* <div>视频 {id} 的详情</div> */}
      <Layout>
        {/* <Header style={{ padding: 0 }}>
          <Head></Head>
        </Header> */}
        <Content>
          <div className="video-view" onKeyDown={changeItem}>
            <Carousel
              dotPosition="right"
              dots={false}
              className="carousel"
              ref={carouselRef}
              afterChange={changeCallBack}
            >
              <div className="carousel-item">
                <FuncSide
                  func={{ star: false, rocket: false, heart: false }}
                  authorMsg={{ avatar: "", userId: 0 }}
                />
              </div>
              <div className="carousel-item">
                {createVideo(videos[videoIndex])}
                <FuncSide
                  func={{ star: false, rocket: false, heart: false }}
                  authorMsg={{ avatar: "", userId: 0 }}
                />
              </div>
              <div className="carousel-item">
                <FuncSide
                  func={{ star: false, rocket: false, heart: false }}
                  authorMsg={{ avatar: "", userId: 0 }}
                />
              </div>
            </Carousel>
          </div>
        </Content>
      </Layout>
    </div>
  );
};

export default VideoData;
